<template>
  <div class="major-wrap">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-fa fa-graduation-cap"></i> 专业管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <!-- 统计卡片区域 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="el-icon-reading"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">专业总数</div>
              <div class="stat-value">{{ tableData.length }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon green">
              <i class="el-icon-office-building"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">系部数量</div>
              <div class="stat-value">{{ departments.length }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon blue">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">平均专业人数</div>
              <div class="stat-value">{{ getAverageStudents() }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon purple">
              <i class="el-icon-data-analysis"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">专业分布</div>
              <div class="stat-value">{{ getDepartmentDistribution() }}</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 搜索和操作区域 -->
      <div class="action-card">
        <el-row :gutter="24" type="flex" justify="space-between" align="middle">
          <el-col :span="4">
            <el-button @click="create" type="primary" icon="el-icon-plus" size="medium" class="create-btn">创建专业</el-button>
          </el-col>
          <el-col :span="16">
            <el-row :gutter="15">
              <el-col :span="12">
                <el-input
                  v-model="queryForm.name"
                  placeholder="请输入专业名称"
                  prefix-icon="el-icon-reading"
                  clearable
                  @keyup.enter.native="query"
                  class="search-input"
                />
              </el-col>
              <el-col :span="12">
                <el-input
                  v-model="queryForm.departmentName"
                  placeholder="请输入系名称"
                  prefix-icon="el-icon-office-building"
                  clearable
                  @keyup.enter.native="query"
                  class="search-input"
                />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4" style="text-align: right;">
            <el-button @click="query" type="primary" icon="el-icon-search" class="search-btn">搜索</el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 表格区域 -->
      <div class="table-card">
        <el-table
          :data="tableData"
          v-loading="loading"
          element-loading-text="加载中..."
          element-loading-spinner="el-icon-loading"
          class="custom-table"
        >
          <el-table-column label="专业Id" prop="id" width="100" align="center">
            <template slot-scope="scope">
              <el-tag size="medium" type="info">{{ scope.row.id }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="专业名称" prop="name" min-width="200"/>
          <el-table-column label="所属系" prop="departmentName" min-width="200">
            <template slot-scope="scope">
              <el-tag size="medium" type="success">{{ scope.row.departmentName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button
                @click="edit(scope.row.id)"
                size="mini"
                type="primary"
                icon="el-icon-edit"
                class="action-btn"
              >编辑</el-button>
              <el-button
                @click="deleteItem(scope.row.id)"
                size="mini"
                type="danger"
                icon="el-icon-delete"
                class="action-btn"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination
            @current-change="getPage"
            :current-page.sync="pageIndex"
            :page-size="pageSize"
            :total="pageSize * pageCount"
            background
            layout="total, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 对话框 -->
      <el-dialog
        :visible.sync="editing"
        :title="entityForm.id === -1 ? '新增专业' : '编辑专业'"
        width="500px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        custom-class="custom-dialog"
      >
        <el-form
          :model="entityForm"
          ref="form"
          label-width="80px"
          class="custom-form"
        >
          <el-form-item label="专业名称" prop="name">
            <el-input
              v-model="entityForm.name"
              placeholder="请输入专业名称"
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="所属系" prop="departmentId">
            <el-select
              v-model="entityForm.departmentId"
              placeholder="请选择所属系"
              class="custom-select"
              style="width: 100%;"
            >
              <el-option
                v-for="(item, index) in departments"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editing = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as api from "../../api/admin/major";
import * as departmentApi from "../../api/admin/department";

export default {
  name: "AdminMajor",
  data() {
    return {
      queryForm: {
        departmentName: "",
        name: ""
      },
      entityForm: {},
      tableData: [],
      pageSize: api.pageSize,
      pageCount: 1,
      pageIndex: 1,
      editing: false,
      loading: false,
      departments: []
    };
  },
  methods: {
    query() {
      this.loading = true;
      api.getPageCount(this.queryForm.departmentName, this.queryForm.name)
        .then(res => {
          this.pageCount = res;
          this.pageIndex = 1;
          this.getPage(1);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getPage(pageIndex) {
      this.loading = true;
      api.getPage(pageIndex, this.queryForm.departmentName, this.queryForm.name)
        .then(res => {
          this.tableData = res;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    create() {
      this.entityForm = {
        id: -1,
        name: "",
        departmentId: ""
      };
      this.editing = true;
    },
    edit(id) {
      api.get(id).then(res => {
        this.entityForm = res;
        this.editing = true;
      });
    },
    save() {
      if (this.entityForm.id === -1) {
        api.create(this.entityForm).then(() => {
          this.finishSave();
        });
      } else {
        api.update(this.entityForm).then(() => {
          this.finishSave();
        });
      }
    },
    finishSave() {
      this.$message.success("操作成功");
      this.getPage(this.pageIndex);
      this.editing = false;
    },
    deleteItem(id) {
      this.$confirm('确认删除该专业吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteItem(id).then(() => {
          this.$message.success("删除成功");
          this.getPage(this.pageIndex);
        });
      }).catch(() => {});
    },
    getDepartments() {
      departmentApi.listName().then(res => {
        this.departments = res;
      });
    },
    // 统计方法
    getAverageStudents() {
      if (this.tableData.length === 0) return '0';
      const total = this.tableData.reduce((sum, item) => sum + (item.studentCount || 0), 0);
      return Math.round(total / this.tableData.length);
    },
    getDepartmentDistribution() {
      if (this.departments.length === 0) return '0%';
      return Math.round((this.tableData.length / this.departments.length) * 100) + '%';
    }
  },
  created() {
    this.query();
    this.getDepartments();
  }
};
</script>

<style scoped>
.major-wrap {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 100px);
}

.crumbs {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.crumbs .el-breadcrumb {
  font-size: 16px;
  color: #606266;
}

/* 统计卡片样式 */
.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;

  i {
    font-size: 24px;
    color: #fff;
  }

  &.green {
    background: #67C23A;
  }

  &.blue {
    background: #409EFF;
  }

  &.purple {
    background: #6B48FF;
  }
}

.stat-info {
  flex: 1;

  .stat-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 8px;
  }

  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }
}

/* 操作区域卡片 */
.action-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 表格卡片 */
.table-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.custom-table {
  margin-bottom: 20px;

  ::v-deep .el-table__header-wrapper {
    th {
      background-color: #f5f7fa !important;
      color: #606266;
      font-weight: 500;
      font-size: 14px;
      padding: 12px 0;
    }
  }

  ::v-deep .el-table__row {
    td {
      padding: 12px 0;
    }
  }
}

.action-btn {
  padding: 8px 16px;
  margin: 0 4px;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* 搜索框样式 */
.search-input {
  ::v-deep .el-input__inner {
    border-radius: 4px;
    transition: all 0.3s;
    
    &:focus {
      border-color: #409EFF;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}

.search-btn {
  padding: 12px 20px;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }
}

/* 创建按钮样式 */
.create-btn {
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
  }
}

/* 分页器样式 */
.pagination-container {
  margin-top: 20px;
  padding: 10px 0;
  text-align: right;
}

/* 弹窗样式 */
.custom-dialog {
  ::v-deep .el-dialog {
    border-radius: 8px;
    overflow: hidden;
  }
  
  ::v-deep .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
    margin: 0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 500;
      color: #303133;
    }
  }
  
  ::v-deep .el-dialog__body {
    padding: 24px;
  }
  
  ::v-deep .el-dialog__footer {
    padding: 16px 20px;
    border-top: 1px solid #ebeef5;
    background: #f8f9fa;
  }
}

.custom-form {
  ::v-deep .el-form-item__label {
    font-weight: 500;
    color: #606266;
  }
  
  ::v-deep .el-input__inner {
    border-radius: 4px;
    transition: all 0.3s;
    
    &:focus {
      border-color: #409EFF;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}

.custom-select {
  ::v-deep .el-input__inner {
    border-radius: 4px;
  }
}
</style>
